<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
  <title>AiDex Sharp 快速开发平台-登录页面</title>
  <link rel="stylesheet" type="text/css" href="/static/regist/css/style.css">
  <link rel="icon" href="/static/regist/img/favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Poppins:600&display=swap" rel="stylesheet">
  <script src="https://kit.fontawesome.com/a81368914c.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>
<body>
<img class="wave" src="/static/regist/img/wave.png">
<div class="container">
  <div class="img">
    <img src="/static/regist/img/bg.svg">
  </div>
  <div class="login-content">
    <form id="register" action="/user/regist">
      <img style="border: 1px solid #d5d5d5;border-radius: 8px;" src="/static/regist/img/logo.svg">
      <h2 class="title" style="font-size: 36px;">若依-AiDex Sharp</h2>
      <div class="input-div one">
        <div class="i">
          <i class="fas fa-user"></i>
        </div>
        <div class="div">
          <h5 id="name_msg">用户名</h5>
          <input id="name" autofocus name="name" type="text" class="input">
        </div>
      </div>
      <div class="input-div pass">
        <div class="i">
          <i class="fas fa-lock"></i>
        </div>
        <div class="div">
          <h5>密码</h5>
          <input id="pass" name="pass" type="password" class="input">
        </div>
      </div>
      <div class="input-div pass">
        <div class="i">
          <i class="fas fa-lock"></i>
        </div>
        <div class="div">
          <h5>确认密码</h5>
          <input id="repass" type="password" class="input">
        </div>
      </div>
      <input type="submit" herf="/user/regist" class="btn" value="注册">
    </form>
  </div>
</div>
<script type="text/javascript" src="/static/regist/js/main.js"></script>
<script src="/static/layui/layui.js"></script>
<script>
  layui.use(function(){
    var $ = layui.$;
    $("#name").blur(function (){
      $.ajax({
        url:"/user/checkUserNameUnique",
        type:"post",
        data:{name:$("#name").val()},
        dataType:"text",
        success:function (data) {
          if(data == "true"){
            console.log(data);
            $("#name_msg").html("");
            $("input[type=submit]").attr("disabled",false).css("background-color","dodgerblue");
          } else {
            $("#name_msg").html("用户名已存在").css("color","red");
            $("input[type=submit]").attr("disabled",true).css("background-color","#ccc");
          }
        }
      })
    });
    //密码一致性检查
    $("#register").on("submit", function(event) {
      const password = $("#pass").val();
      const confirmPassword = $("#repass").val();

      if (password !== confirmPassword) {
        alert("两次输入的密码不一致！");
        event.preventDefault(); // 阻止表单提交
      }
    });
  });
</script>
</body>
</html>
